<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in contentArr">
        <el-card>
          <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%;height: 150px">
          <p style="height: 40px">{{item.title}}</p>
          <el-row :gutter="10">
            <el-col :span="4"><el-avatar :src="'http://localhost:8080'+item.userImgUrl"></el-avatar></el-col>
            <el-col :span="10" style="font-size: 20px;line-height: 40px">{{item.nickname}}</el-col>
            <el-col :span="10" style="line-height: 40px">{{item.categoryName}}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

import {onBeforeUpdate, onMounted, ref} from "vue";
import axios from "axios";

const contentArr = ref([]);
const loadContents = ()=>{
  //判断地址栏中是否包含wd,如果包含代表需要搜索内容
  if (location.search.includes('wd')){//搜索
    let wd = new URLSearchParams(location.search).get('wd');
    //发请求获取搜素的内容
    axios.get('http://localhost:8080/v1/contents/search?wd='+wd)
        .then((response)=>{
          if (response.data.code==2001){
            contentArr.value = response.data.data;
          }
        })
  }else{//包含type 专题
    //获取地址栏中的type值
    let type = new URLSearchParams(location.search).get('type');
    axios.get('http://localhost:8080/v1/contents/'+type+'/list')
        .then((response)=>{
          if (response.data.code==2001){
            contentArr.value = response.data.data;
          }
        })
  }

}
onBeforeUpdate(()=>{
 loadContents();
})
onMounted(()=>{
  loadContents();
})
</script>

<style scoped>

</style>